<div class="form-group row">
  <label class="col-md-2 col-form-label" for="text-input">{{ $label??'' }}</label>
  <div class="col-md-9">
    <button id="{{$element??'picture'}}" type="button" class="upload"  data-name="{{$name}}" data-multi="{{$multiple??0}}">选择图片</button>

    <div class="picture-preview">
      @unless(empty($default))
          @if(!empty($multiple))
            @foreach($default as $v)
                <img src="{{Storage::url($v->path)}}"  alt="" width="80" height="80">
                <input type="hidden" name="picture[]" value="{{$v->path}}">
            @endforeach
          @else
          <img src="{{Storage::url($default)}}"  alt="" width="80" height="80">
           <input type="hidden" name="{{$name}}" value="{{ $default }}">
          @endif
      @endunless
    </div>
  </div>
</div>
<style type="text/css">
  .picture-preview{
    display: flex;
  }
  .picture-preview img {
    margin-right: 5px
  }
</style>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script type="module">

  layui.use(['upload', 'jquery'], function() {
    const uploader = layui.upload;
    var $ = layui.$

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });  

    uploader.render({
      elem: "#{{$element??'picture'}}",
      url: "{{route('admin.upload.store')}}",
      multiple:true,
      done:function(res, index, upload) {
        console.log(res)
        var elem = this.item[0];
        let name = $(elem).data('name');
        let multi = $(elem).data('multi')
        
        let fieldName = multi ? name+'[]': name;
        let str = "<div class='mt-1'><img src="+res.data.full_path+" width=80 height=80><input type=hidden name="+fieldName+" value="+res.data.src+"></div>";
        if(multi)
        {
          $(elem).parent().find(".picture-preview").append(str);
        }
        else
        {
          $(elem).parent().find(".picture-preview").html(str);
        }
      },
    })
  })  
</script>